<template>
	<view class="window">
		<block v-if="!boxHide">
			<view class="window_flex">
				<view class="pay">
					<image src="/static/images/pay_bg.png" class="pay_bg"></image>
					<view class="pay_box">
						<view class="font_item w80">
							<view>名称</view><view>{{info.title == null ? "-" : info.title}}</view>
						</view>
						<view class="font_item w80">
							<view>编号</view><view>{{info.number == null ? "-" : info.number}}</view>
						</view>
						<view class="font_item w80">
							<view>数量</view><view>{{info.stock}}</view>
						</view>
						<!-- <view class="font_item w80">
							<view>库房</view><view>{{item.number}}</view>
						</view> -->
						<view class="font_item w80">
							<view>日期</view><view>{{info.create_at}}</view>
						</view>
						
						<view class="pay_title">
							<view class="pay_title_text">
								<view>请扫码付款</view>
								<view>有效时间：{{timeStr=="0"?"已失效，请刷新":timeStr}}</view>
							</view>
							<view class="pay_title_btn">
								<image src="/static/images/new.png"></image>
								<view class="" @click="createPayQRcode" >刷新</view>
							</view>
						</view>
						
						<image class="pay_code" :src="QRCodeUrl"></image>
						<view class="pay_prompt">请核对付款信息</view>
						<!-- <view class="pay_btn" @tap="freeService()">免费服务</view> -->
					</view>
				</view>
			</view>
		</block>
		<Loading ref="load"></Loading>
	</view>
</template>

<script>
	export default{
		data(){
			return{
				boxHide:true,
				info:{},
				id:"" ,
				QRCodeUrl:"",//收款二维码
				pay:false, // 是否支付
				timeStr:'03:00:00'
			}
		},
		onLoad(options) {
			this.id = options.id
			this.$refs.load.initLoading({loadType:1,loadPrompt:false}).then(res =>{
				this.boxHide = false
				this.$api.getAccessoriesInfo({id:options.id}).then(res => {
					this.info = res;
					this.$refs.load.getLoadingData({})

					this.createPayQRcode();
				})
			})

		},
		methods:{
			freeService(){
				uni.showModal({ 
					title:"温馨提示",
					content:"是否进行免费服务",
					success:res=>{
						if(res.confirm){
							this.$api.freeService({id:this.id}).then(res =>{
								this.$app.globalData.upData.accessories = true
								uni.redirectTo({
									url:"/pages/accessories/info/info?id=" + this.id
								})
							})
						}
					}
				})
			},
			// 生成付款二维码
			createPayQRcode(){

				if(this.info.payment==0){

					uni.showToast({
						title: '支付金额不能小于0元',
						icon: "none",
					})

				}else{
					this.$api.partsPayQRCode({part_id:this.info.id,payment:0.1}).then(res=>{
						this.QRCodeUrl=res.code_url.indexOf('data:image/png;base64,')!=-1?res.code_url:'data:image/png;base64,'+res.code_url;
						this.countDown(10800);
						this.isPay();
					})
				}

			},
			// 支付是否成功
			isPay:function(){

				this.$api.getAccessoriesInfo({id:this.id}).then(res => {
					 
					if(res.status == 1){
						this.pay = true;
						uni.showToast({
							title: "支付成功",
							icon: "none",
							success() {
								setTimeout(function() {
										let pages = getCurrentPages(); // 当前页面
										let beforePage = pages[pages.length - 2]; // 前一个页面
										uni.navigateBack({
											success: function() {
												beforePage.onLoad(); // 执行前一个页面的onLoad方法
											}
										}); 
								}, 1000)								
							}
						})
					}else{
						setTimeout(()=>{
				          this.isPay()
				        },3000)
					}

				})

			},
			// 倒计时
			countDown:function(maxtime){
				var that = this;
				var timer = setInterval(function() { 
					if( !!maxtime ){  
						var  hour = Math.floor((maxtime % 86400) / 3600),
						minutes = Math.floor((maxtime % 3600) / 60), 
						seconds = Math.floor(maxtime%60);
						that.timeStr = "0"+hour+":"+minutes+":"+seconds;
						--maxtime;  
					} else {  
						clearInterval( timer ); 
						that.timeStr = "0";
					}  
				}, 1000);

			}

		}
	}
</script>

<style>
	.window{background: #049BFF;}
	.pay{width: 690upx;height: 1124upx;position: relative;}
	.pay_bg,.pay_box{position: absolute;width: 690upx;height: 1124upx;left: 0;top: 0;}
	.pay_box{padding-top: 40upx;box-sizing: border-box;}
	.font_item{min-height: 60upx;}
	.pay_title{width: 100%;padding: 0 30upx;box-sizing: border-box;display: flex;flex-direction: row;align-items: center;justify-content: space-between;margin-top: 70upx;font-size: 34upx;color: #333333;}
	.pay_title_text view:nth-child(2){font-size: 28upx;color: #18A1FC;margin-top: 5upx;}
	.pay_title_btn{display: flex;flex-direction: row;align-items: center;font-size: 24upx;color: #2FA9FA;}
	.pay_title_btn image{width: 23upx;height: 23upx;margin-right: 5upx;}
	.pay_code{width: 380upx;height: 380upx;margin-top: 30upx;background: #EEEEEE;margin-left: 156upx;}
	.pay_prompt{text-align: center;font-size: 28upx;color: #333333;line-height:80upx;}
	.pay_btn{width: 482upx;height: 84upx;background: #049BFF;color: #FFFFFF;text-align: center;line-height: 84upx;border-radius: 8upx;font-size:30upx;margin-left: 104upx;}
</style>
